<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/main.css">
    <title>Document</title>
    <style>
        .topbar {
            height: 35px;
            font-size: 12px;
        }

        .topbar li {
            line-height: 35px;


        }

        .shortcut {
            height: 138px;
            padding: 22px 58px;
        }

        .search {
            width: 690px;
            height: 37px;
            border-radius: 20px;
            border: 2px solid red;
            padding-left: 16px;

        }

        .search .input {
            width: 564px;
            height: 26px;
            color: gray;
            font-style: 12px;
        }

        .search button {
            width: 73px;
            height: 30px;
            border: none;
            border-radius: 20px;
            background-color: red;
            color: white;
            font-style: 16px;
            margin-top: 2px;
            margin-left: 543px;
        }
    </style>
</head>

<body>
    <section class="header container">
        <div class="topbar d-flex justify-content-between ">
            <ul class="d-flex ">
                <li class=" "><i class="bi bi-chevron-down" style="width: 12px;height: 6px;"></i>中国大陆</li>
                <li class="red bi-chevron-down ">亲，请登录</li>
                <li></li>
                <li></li>
            </ul>
            <ul class="d-flex">
                <li class="red">淘宝网首页</li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="shortcut d-flex">
            <span> <img src="./img/O1CN01BqHq2Z28Ns0s0KLHa_!!6000000007921-2-tps-126-54.png"
                    style="width: 126px;height: 54px;margin-right: 58px;" alt=""></span>
            <div class="">
                <div class="search ">
                    <span class="input">洗衣液</span>
                    <button>搜索</button>
                </div>
                <ul>
                    <li>聚划算</li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </section>

    <section class="main container d-flex justify-content-around">
        <div class="sidebar">
            <div class="d-flex">
                <div class="">女人</div>
                <div class="d-flex flex-wrap dresses">
                    <span>连衣裙冬</span>
                    <span>女装</span>
                    <span>拖鞋</span>
                    <span>拖鞋</span>
                    <span>拖鞋</span>
                    <span>半身裙</span>
                    <span>半身裙</span>
                    <span>拖鞋</span>
                </div>
            </div>
        </div>
        <div class=""><img style="width: 610px;height: 280px;"
                src="./img/O1CN01ZaP2Or1ZzsLJJb4Wg_!!6000000003266-0-tps-800-450.jpg" alt=""></div>
        <div class=""><img src="./img/Snipaste_2024-09-06_17-48-14.png" alt=""></div>
    </section>

</body>

</html>